<template>
  <t-modal
    title="项目流程图"
    width="1390px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="flow-modal-container"
    forceRender
    v-bind="footer"
  >
    <div class="flow-legend">
      <div class="legend-item">未开始</div>
      <div class="legend-item">已完成</div>
    </div>
    <div class="curve-modal-body">
      <components
        :is="parameter.flowChart"
        :visible.sync="visible"
        :tenantCode="parameter.proCode"
      ></components>
    </div>
  </t-modal>
</template>

<script>
import flowPicture from "@/pages/customPage/knowledgeBase/flowPath/components/flowPicture.vue";
import ganyuFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuFlow.vue";
import ganyuSgFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuSgFlow.vue";
import ganyuGlFlow from "@/pages/customPage/knowledgeBase/flowPath/components/ganyuGlFlow.vue";
import lygFlow from "@/pages/customPage/knowledgeBase/flowPath/components/lygFlow.vue";
import xuweiFlow from "@/pages/customPage/knowledgeBase/flowPath/components/xuweiFlow.vue";
export default {
  components: {
    flowPicture,
    ganyuFlow,
    ganyuGlFlow,
    lygFlow,
    xuweiFlow,
    ganyuSgFlow,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    footer: {
      type: Object,
      default() {
        return {
          footer: null,
        };
      },
    },
  },
  methods: {
    //关闭
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.flow-modal-container {
  .flow-legend {
    position: absolute;
    top: 16px;
    right: 80px;
    display: flex;
    font-size: 14px;
    .legend-item {
      &::before {
        content: "";
        height: 10px;
        width: 10px;
        background: #239b53;
        display: inline-block;
        margin-right: 8px;
      }
      &:first-of-type {
        margin-right: 40px;
        &::before {
          background: #8c8c8c;
        }
      }
    }
  }
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 14px;
    box-sizing: border-box;
    height: 700px;
    overflow: auto;
    background-image: linear-gradient(
        to right,
        rgb(234 234 234) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgb(234 234 234) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
  }
}
</style>
